<script setup lang="ts">
import TileItem from "@/components/tiles/item/TileItem.vue";
import {onMounted, watchEffect, ref} from 'vue';
const props = defineProps({
    tilesSize: {type: Number, required: true},
    tiles: {type: Array<string>, required: false, default: new Array<string>()}, // 牌
})

let baseTransformStyle = "rotateX(-30deg) rotateY(-260deg)";

let transformStyleArr = ref(new Array<string>());

function load() {
  transformStyleArr.value = new Array<string>();
  for (var i = 0; i<props.tilesSize; i++) {
    // 依次向X轴移动60px（一个麻将的长度）
    transformStyleArr.value.push(baseTransformStyle + " translateX(" + ((props.tilesSize - i)*48) + "px)" + (props.tiles && props.tiles.length>0?" rotateX(90deg)" : ""));
  }
}
onMounted(() => {
 load();
})
watchEffect(() => {
 load();
})
</script>

<template>
  <template v-if="!props.tiles || props.tiles.length == 0">
    <TileItem v-for="value in tilesSize" :key="value" :transformStyle="transformStyleArr[value-1]" :isAbsolute="true" :scale="0.8"/>
  </template>
  <template v-else>
    <TileItem v-for="(tile,index) in props.tiles" :style="{'transition': 'all 0.5s ease-in-out'}"  :key="tile + index" :code="props.tiles[index]" :transformStyle="transformStyleArr[index]" :isAbsolute="true" :scale="0.8"/>
  </template>
</template>

<style scoped>

</style>
